<template>
    <div class="white_list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.blacklistManagement')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                  <!--手机号-->
                  <el-col :span="4">
                    <el-form-item prop="phone" label="">
                      <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <!--身份证号-->
                  <el-col :span="4">
                    <el-form-item prop="cardId" label="">
                      <el-input v-model="form.cardId" :placeholder="$t('common.identityNumber')" clearable></el-input>
                    </el-form-item>
                  </el-col>
                    <el-col :span="8">
                        <el-form-item prop="uploadDate"><!--模板名称-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.createTime"
                                type="datetimerange"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.createStartTime')"
                                :end-placeholder="$t('common.createEndTime')"></el-date-picker>
                            </el-form-item>
                    </el-col>
                  <!--操作人-->
                  <el-col :span="8">
                    <el-form-item prop="operatorId" label="">
                      <el-select v-model="form.operatorId" :placeholder="$t('common.operator')" clearable  style="width: 100%;">
                        <el-option v-for="item in operatorList" :key="item.operatorId" :value="item.operatorId" :label="item.operatorName"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                    <!--姓名-->
                    <el-col :span="4">
                        <el-form-item prop="userName" label="">
                            <el-input v-model="form.userName" :placeholder="$t('common.name')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="showUpload" type="primary">{{ $t('common.add') }}</el-button><!--新增-->
                            <el-button @click="()=>this.$refs.complaintUserUp.showUpload()" type="primary">{{ $t('common.complaintUserUp') }}</el-button><!--投诉用户-->

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="150"></el-table-column><!--手机号码-->
                        <el-table-column prop="userName" :label="$t('common.name')" min-width="150"></el-table-column><!--姓名-->
                        <el-table-column prop="cardId" :label="$t('common.identityNumber')" min-width="180"></el-table-column><!--身份证号-->
                        <el-table-column prop="remark" :label="$t('common.reason')" min-width="160" show-overflow-tooltip></el-table-column><!--原因-->
                        <el-table-column prop="operatorName" :label="$t('common.operator')" min-width="130"></el-table-column><!--操作人-->
                        <el-table-column :label="$t('common.createTime')" min-width="180"><!--创建时间-->
                            <template slot-scope="{ row }">{{ row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" min-width="120"><!--操作-->
                            <template slot-scope="{row}">
                                <el-button @click="remove(row)" type="text">{{ $t('common.remove') }}</el-button><!--移除-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>

        <!--上传黑名单弹框-->
        <alert-dialog :visible.sync="showUploadDialog" :title="$t('operation.addBlacklist')" width="560px">
            <el-form ref="uploadForm" :model="uploadForm" :rules="uploadFormRules" :label-width="$i18n.locale==='zhCN'?'100px':'150px'" label-position="right">
                <!--选择-->
                <el-form-item :label="$t('common.select')+' : '" prop="type">
                    <el-select v-model="uploadForm.type" @change="handleUploadTypeChange" style="width: 100%">
                        <el-option value="1" :label="$t('common.addOne')">{{ $t('common.addOne') }}</el-option><!--单个新增-->
                        <el-option value="2" :label="$t('common.addBatch')">{{ $t('common.addBatch') }}</el-option><!--批量导入-->
                    </el-select>
                </el-form-item>
                <!--手机号-->
                <el-form-item :label="$t('common.phoneNum')+' : '" prop="phone" v-if="uploadForm.type==='1'">
                    <el-input v-model="uploadForm.phone" :placeholder="$t('common.phoneNum')" maxlength="11"></el-input>
                </el-form-item>
                <!--身份证号-->
                <el-form-item :label="$t('common.identityNumber')+' : '" prop="cardId" v-if="uploadForm.type==='1'">
                    <el-input v-model="uploadForm.cardId" :placeholder="$t('common.identityNumber')" ></el-input>
                </el-form-item>
                <!--姓名-->
                <el-form-item :label="$t('common.name')+' : '" prop="userName" v-if="uploadForm.type==='1'">
                    <el-input v-model="uploadForm.userName" :placeholder="$t('common.name')"></el-input>
                </el-form-item>
                <!--导入-->
                <el-form-item :label="$t('common.import')+' : '" prop="phoneList" v-if="uploadForm.type==='2'">
                    <el-button @click="handleSelectFile" type="primary" size="mini">{{ $t('common.chooseFile') }}</el-button><!--选择文件-->
                    <el-button @click="downloadTemplate" type="text">{{ $t('common.downloadTemplateExcel') }}</el-button><!--下载导入模板-->
                    <input ref="uploadFile" @change="handleFileChange" style="display: none" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                    <div>{{ uploadForm.excelFile }}</div>
                </el-form-item>
                <!--原因-->
                <el-form-item :label="$t('common.reason')+' : '" prop="remark">
                    <el-input v-model="uploadForm.remark" :placeholder="$t('common.reason')" type="textarea" :rows="5" maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <p v-if="uploadForm.errorMsg" class="color_red">* {{ uploadForm.errorMsg }}</p>
            <div slot="footer">
                <el-button @click="showUploadDialog=false;">{{ $t('common.cancel') }}</el-button><!--取消-->
                <el-button @click="submitUpload" type="primary">{{ $t('common.confirm') }}</el-button><!--确认-->
            </div>
        </alert-dialog><!--上传黑名单弹框end-->

        <alert-dialog :title="this.$t('common.importComplete')" :visible.sync="showRefuseDialog" :header-border="false" width="460px">
            <div>
                <i class="icon_warning el-icon-warning"></i>
                {{ this.$t('common.importCompleteResult', { success: failData.success, fail: failData.fail }) }}
            </div>
            <div slot="footer">
                <el-button @click="downloadFailData">{{ $t('common.downloadFailList') }}</el-button>
                <el-button @click="showRefuseDialog=false" type="primary">{{ $t('common.confirm') }}</el-button>
            </div>
        </alert-dialog>
        <complaintUserUp ref="complaintUserUp"/>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.icon_warning{
    color: #ff9d63;
    font-size: 24px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
</style>
